<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            display: flex;
            width: 800px;
            height: 410px;
            margin: 100px auto;
            align-items: center;
        }

        .icon {
            width: 600px;
            height: 410px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <button @click="prev">上一页</button>
            <!-- 已知img的src不能写死，所以加冒号（v-bind的缩写） -->
            <!-- 但是要思考，不写死，它的值从哪取呢？从imgs这个数组里取 -->
            <!-- 通过观察发现下标也不能写死,所以用一个变量 -->
            <img class="icon" :src="imgs[index]" alt="">
            <button @click="next">下一页</button>
        </div>
    </div>
    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                index: 0,
                imgs: [
                    'https://game.gtimg.cn/images/yxzj/img201606/heroimg/155/155-mobileskin-1.jpg',
                    'https://game.gtimg.cn/images/yxzj/img201606/heroimg/174/174-mobileskin-1.jpg',
                    'https://game.gtimg.cn/images/yxzj/img201606/heroimg/141/141-mobileskin-1.jpg',
                    'https://game.gtimg.cn/images/yxzj/img201606/heroimg/149/149-mobileskin-1.jpg',
                    'https://game.gtimg.cn/images/yxzj/img201606/heroimg/115/115-mobileskin-1.jpg'
                ]
            },
            methods: {
                prev () {
                    this.index--
                    // 小于0就越界，最小下标是0
                    if (this.index < 0) {
                        this.index = this.imgs.length - 1
                    }
                },
                next () {
                    this.index++
                    // 什么时候是下标越界了？大于或等于长度时
                    // 下标最多只能到长度-1，所以等于长度或者大于长度都是越界
                    if (this.index >= this.imgs.length) {
                        this.index = 0
                    }
                }
            }
        })

    </script>
</body>

</html>